<template>
  <div class="show_message">
    <img
      v-if="show"
      src="../../assets/images/箭头 下.png"
      class="firstIcon"
      alt=""
      @click="onClick"
    >
    <ul v-if="!show">
      <li>
        <a
          href="#"
        ><img
          src="../../assets/images/电话.png"
          class="secondIcon"
          alt=""
        ></a>
        <div class="text">
          <img src="../../assets/images/电话图片.png" alt="" class="jpg">
        </div>
      </li>
      <li>
        <a
          href="#"
        ><img
          src="../../assets/images/邮箱-粗线条-fill.png"
          class="secondIcon"
          alt=""
        ></a>
        <div class="text">
          <img src="../../assets/images/邮箱图片.png" alt="" class="jpg">
        </div>
      </li>
      <li>
        <a
          href="#"
        ><img
          src="../../assets/images/微信.png"
          class="fourthIcon"
          data-cmd="weixin"
          alt=""
        ></a>
        <div class="text">
          <img
            src="../../assets/images/微信公众号图片.jpg"
            class="png"
            alt=""
          >
        </div>
      </li>
      <li>
        <a
          href="https://weibo.com/u/2526056150"
          target="_blank"
        ><img
          src="../../assets/images/微博.png"
          class="fifthIcon"
          data-cmd="tsina"
          alt=""
        ></a>
        <div class="text">
          <img src="../../assets/images/微博图片.jpg" class="png" alt="">
        </div>
      </li>
      <li>
        <img
          src="../../assets/images/箭头 上.png"
          class="sow"
          alt=""
          @click="onClick"
        >
      </li>
    </ul>
  </div>
</template>
<script>
export default {
  name: 'SuspendedWindow',
  props: {},
  data() {
    return {
      show: false
    };
  },
  methods: {
    onClick() {
      this.show = !this.show;
    }
  }
};
</script>

<style scoped lang="less">
@aaa:192;
a {
  position: relative;
}
img {
  border: none;
}
.show_message {
  position: fixed;
  margin: 0;
  padding: 0;
  right: 30px;
  //top: 45%
   top: (800rem / @aaa);
  ul {
    display: flex;
    flex-direction: column;
  }
  ul li {
    margin-bottom: 30px;
    margin-right: 30px;
    text-align: center;
    height: 30px;
    position: relative;
    a {
      position: absolute;
      top: 0;
      left: 0;
      height: 100%;
      img {
        left: 0;
        position: absolute;
        top: 0;
      }
    }
    a:hover ~ .text {
      display: block;
      position: absolute;
      left: -150px;
      margin-right: 20px;
      line-height: 2em;
      font-size: 18px;
      font-weight: bold;
      width: 160px;
      height: 20%;
      .png {
        width: 100px;
        height: 100px;
        position: relative;
        margin-right: 20px;
        transition: all 0.5s;
      }
      .jpg {
        height: 95px;
        width: 157px;
        position: relative;
        margin-right: 20px;
        transition: all 0.5s;
      }
    }
    .text {
      display: none;
    }
  }
  .firstIcon {
    width: 30px;
    height: 30px;
    margin-bottom: 20px;
    top: -300px;
    // margin-right: 30px;
  }
  .secondIcon {
    width: 30px;
    height: 30px;
  }
  .thirdIcon {
    width: 30px;
    height: 30px;
  }
  .fourthIcon {
    width: 30px;
    height: 30px;
  }
  .fifthIcon {
    width: 30px;
    height: 30px;
  }
  .sow {
    width: 30px;
    height: 30px;
    position: absolute;
    top: 0;
    left: 0;
  }
}
</style>
